<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL %>logo.png" />
    <title>深瞳系统</title>
    <style>
        @keyframes pulse {

            0%,
            100% {
                opacity: 0.6;
            }

            50% {
                opacity: 1;
            }
        }

        @keyframes glow {

            0%,
            100% {
                box-shadow: 0 0 20px rgba(0, 255, 255, 0.4);
            }

            50% {
                box-shadow: 0 0 40px rgba(0, 255, 255, 0.8);
            }
        }

        @keyframes rotate {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

        @keyframes float {

            0%,
            100% {
                transform: translateY(0px);
            }

            50% {
                transform: translateY(-10px);
            }
        }

        body {
            margin: 0;
            padding: 0;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
                'Helvetica Neue', Helvetica, Arial, sans-serif;
            background: #0a0a0a;
        }

        .first-loading-wrp {
            position: relative;
            width: 100%;
            height: 100vh;
            background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .first-loading-wrp::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: linear-gradient(rgba(0, 255, 255, 0.1) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0, 255, 255, 0.1) 1px, transparent 1px);
            background-size: 50px 50px;
            animation: pulse 4s ease-in-out infinite;
            z-index: 1;
            pointer-events: none;
        }

        .first-loading-wrp::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
            z-index: 2;
            pointer-events: none;
        }

        .system-logo {
            width: 120px;
            height: 120px;
            margin-bottom: 30px;
            border: 3px solid rgba(0, 255, 255, 0.6);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: glow 2s ease-in-out infinite;
            z-index: 3;
            position: relative;
            background: transparent;
        }

        .system-logo::before {
            content: '';
            position: absolute;
            width: 140px;
            height: 140px;
            border: 1px solid rgba(0, 255, 255, 0.3);
            border-radius: 50%;
            animation: rotate 20s linear infinite;
            border-top-color: rgba(0, 255, 255, 0.8);
        }

        .eye-icon {
            width: 40px;
            height: 40px;
            background: radial-gradient(circle, #00ffff 0%, #0080ff 100%);
            border-radius: 50%;
            position: relative;
            z-index: 2;
            animation: pulse 2s ease-in-out infinite;
            overflow: hidden;
        }

        .first-loading-wrp>h1 {
            font-size: 64px;
            font-weight: 800;
            color: white;
            margin: 20px 0 10px 0;
            background: linear-gradient(135deg, #00ffff 0%, #ffffff 50%, #00ffff 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            letter-spacing: 6px;
            text-shadow: 0 0 30px rgba(0, 255, 255, 0.5);
            z-index: 3;
            position: relative;
        }

        .system-subtitle {
            font-size: 18px;
            color: rgba(0, 255, 255, 0.9);
            margin-bottom: 50px;
            letter-spacing: 3px;
            font-weight: 300;
            z-index: 3;
            position: relative;
        }

        .first-loading-wrp .loading-wrp {
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 3;
            position: relative;
            margin-bottom: 20px;
        }

        .loading-spinner {
            width: 40px;
            height: 40px;
            border: 3px solid rgba(0, 255, 255, 0.3);
            border-top: 3px solid #00ffff;
            border-radius: 50%;
            animation: rotate 1s linear infinite;
            box-shadow: 0 0 20px rgba(0, 255, 255, 0.4);
        }

        .loading-text {
            color: rgba(255, 255, 255, 0.8);
            font-size: 16px;
            letter-spacing: 2px;
            font-weight: 300;
            z-index: 3;
            position: relative;
        }

        @media (max-width: 768px) {
            .first-loading-wrp>h1 {
                font-size: 48px;
                letter-spacing: 4px;
            }

            .system-logo {
                width: 80px;
                height: 80px;
            }

            .system-logo::before {
                width: 100px;
                height: 100px;
            }

            .eye-icon {
                width: 30px;
                height: 30px;
            }

            .system-subtitle {
                font-size: 16px;
                letter-spacing: 2px;
            }
        }

        @media (max-width: 480px) {
            .first-loading-wrp>h1 {
                font-size: 36px;
                letter-spacing: 2px;
            }

            .system-logo {
                width: 60px;
                height: 60px;
            }

            .system-logo::before {
                width: 80px;
                height: 80px;
            }

            .eye-icon {
                width: 24px;
                height: 24px;
            }

            .system-subtitle {
                font-size: 14px;
                letter-spacing: 1px;
            }
        }
    </style>
    <!-- require cdn assets css -->
    <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
        <link rel="stylesheet" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" />
        <% } %>
            <script>
                (function () {
                    // 该事件是核心
                    window.addEventListener("storage", function (event) {
                        if (event.key == "getSessionStorage") {
                            // 已存在的标签页会收到这个事件
                            localStorage.setItem("_up_qjt_csrf_", JSON.stringify(sessionStorage));
                            localStorage.removeItem("_up_qjt_csrf_");
                        } else if (event.key == "_up_qjt_csrf_" && !sessionStorage.length) {
                            // 新开启的标签页会收到这个事件
                            var data = JSON.parse(event.newValue), value;
                            for (key in data) {
                                sessionStorage.setItem(key, data[key]);
                            }
                        }
                    });
                    if (!sessionStorage.length) {
                        // 这个调用能触发目标事件，从而达到共享数据的目的
                        localStorage.setItem("getSessionStorage", Date.now());
                    }
                })();
            </script>
</head>

<body>
    <noscript>
        <strong>抱歉，深瞳系统需要启用JavaScript才能正常运行。请启用JavaScript后继续。</strong>
    </noscript>
    <div id="app">
        <div class="first-loading-wrp">
            <div class="system-logo">
                <div class="eye-icon"></div>
            </div>
            <h1>深瞳系统</h1>
            <div class="system-subtitle">智能风控 · 精准识别 · 安全防护</div>
            <div class="loading-wrp">
                <div class="loading-spinner"></div>
            </div>
            <div class="loading-text">系统加载中...</div>
        </div>
    </div>
    <!-- require cdn assets js -->
    <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
        <script type="text/javascript" src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
        <% } %>
            <!-- built files will be auto injected -->
</body>

</html>